<template>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="onRegister" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45">Hello</span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                        <input class="input100" type="text" name="mobile" placeholder="手机号" v-model="LoginAuth.mobile"
                            autocomplete="off" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                        <input class="input100" type="password" name="password" v-model="LoginAuth.password"
                            placeholder="密码" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入确认密码">
                        <input class="input100" type="password" name="repass" v-model="LoginAuth.repass" placeholder="确认密码"
                            required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn p-t-10 p-b-30">
                        <button class="login100-form-btn">注 册</button>
                    </div>

                    <div class="text-center w-full">
                        <router-link class="txt1" to="/business/base/login">
                            立即登录
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { showNotify } from 'vant'
import ApiList from '@/api'

let LoginAuth = reactive({
    mobile: '13423562356',
    password: '123456',
    repass: '123456'
})

//提交注册
async function onRegister() {
    let reg = /(^1[3|4|5|7|8][0-9]{9}$)/
    if (!reg.test(LoginAuth.mobile)) {
        showNotify({
            type: 'warning',
            message: '手机号格式错误'
        })
        // return false
    }
    if (LoginAuth.password != LoginAuth.repass) {
        showNotify({
            type: 'warning',
            message: '密码与确认密码不一致'
        })
        // return false
    }

    // 封装数据
    let data = {
        mobile: LoginAuth.mobile,
        password: LoginAuth.password
    }

    let res = await ApiList.register(data)

    console.log(res)
}
</script>

<style>
@import url('/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');
@import url('/assets/css/util.css');
@import url('/assets/css/main.css');
</style>